<template>
   <!-- 留言板 --> 
   <section class="feed-2" id="messageboard" v-if="!$store.state.isPre">
     <section v-if="$store.state.not_closer_app && messagelist.data.length > 0">
      <section class="split-box"></section>
      <!-- 留言列表 用int_category 判断 0 1 3 5 暂时用else-if -->
      <!-- <section v-if="res.int_category === 0 || res.int_category === 5 || res.int_category === 3 "> -->
      <section v-if="$store.state.res.int_category != 1 ">
        <section class="message-num flex flex-pack-justify">
          <span>精彩留言</span>
          <span class="writeMessage" @click="writeMessage('comment', $route.params.id)">写留言</span>
        </section>
        <section>
          <ul class="feed-messagebord-list">
            <li class="feed-messagebord-list-cell" v-for="(item, index) in messagelist.data" :key="index">
              <section class="messager-info flex flex-align-center flex-pack-justify">
                <section class="messager-info-div flex flex-align-center" v-if="item.user">
                  <img v-if="item.user.attributes && item.user.attributes.roster" v-lazy="$com.makeFileUrl(item.user.attributes.roster.avatar)">
                  <img v-else v-lazy="$com.makeFileUrl(item.user.avatar)">
                  <section class="flex flex-v">
                    <span v-if="item.user.attributes && item.user.attributes.roster" class="messager-name">{{ item.user.attributes.roster.name }}</span>
                    <span v-else class="messager-name">{{ item.user.fullname }}</span>
                    <span class="messager-time">{{ $com.createTime(item.long_create_time, 'yy-mm-dd hh:MM') }}</span>
                  </section>
                </section>
                <section class="icon-group flex flex-align-center">
                  <!-- 留言补丁 -->
                  <!-- <p class="flex flex-align-center cursor messages" style="margin-right:10px" @click="toMessage(item)"> -->
                  <p class="flex flex-align-center cursor messages" style="padding-right:10px; padding-top: 1px;" @click="writeMessage('reply', item.commentid)">
                    <img src="" alt="">
                    <span>{{ item.replyNumber }}</span>
                  </p>
                  <!-- 点赞补丁 -->
                  <p class="supports cursor flex flex-align-center" @click="toSupport($event)">
                    <img src="">
                  </p>
                </section>
              </section>
              <section class="messager-content">
                <section class="messager-content-1">{{ item.content }}</section>
                <section v-if="item.replyNumber > 0">
                  <ul class="messager-comments">
                    <li class="messager-comments-cell" v-for="(commentItem, commentIndex) in item.sonList" v-if=" commentIndex <= 3" :key="commentIndex">
                      <span>{{ commentItem.user.fullname }}：</span>
                      <span class="messager-comment">{{ commentItem.content }}</span>
                    </li>
                    <!-- 更多回复补丁 -->
                    <li class="messager-comments-cell" v-if="item.replyNumber > 3" @click="downApp($event, 'more_reply')">
                    <!-- <li class="messager-comments-cell" style="color: #5e97cd;" v-if="item.replyNumber > 3" @click="morereply(item)"> -->
                      <span class="reply-number">共{{ item.replyNumber }}条回复</span>
                    </li>
                  </ul>
                </section>
              </section>
            </li>
          </ul>
        </section>
        <section class="look-more flex flex-align-center flex-pack-center" @click="firstLogin">
          点击查看更多评论 <i class="right-arrow"></i>
        </section>    
      </section>
    </section>
    <section v-else>
      <section class="split-box"></section>
        <section class="nomessage flex flex-align-center flex-pack-justify">
        <span class="prompt">暂无留言，赶紧留言吧～</span>
        <span class="write flex flex-align-center" @click="writeMessage('comment', $route.params.id)">写留言</span>
      </section>
    </section> 
   </section>
</template>
<script>
import Cookie from "js-cookie";
export default {
  data() {
    return {
      isLike: false,
      b: [],
      messagelist: {
        data: []
      },
      defaultImg:
        ""
    };
  },
  methods: {
    async getMessageList() {
      let self = this;
      let data = await self.$axios.$get(
        `${api.command.comments}?pagesize=5&pagenum=1&subjectid=${
          self.$route.params.id
        }`
      );
      if (data.code === 0) {
        self.messagelist = data.result;
        self.$store.commit("SET_MESSAGE_LIET", data.result);
      } else {
        self.$toast({
          message: data.result,
          position: "top"
        });
      }
      return true;
    },
    // 先登录 再下载流程
    // 需要登录的操作 先判断后执行
    async firstLogin() {
      let self = this;
      self.$store.commit("SET_EXTENSION_TEXT", "more_message");
      // 渲染页面前 先判断cookies token是否存在
      if (Cookie.get("token")) {
        self.downApp();
      } else {
        // 前期 仅微信 后期再做微博，qq等授权， 所以在其他浏览器 需使用默认登录
        if ($async.isWeiXin()) {
          // 通过微信授权 获取code
          await self.$store.dispatch("get_wx_auth", {
            // 正式
            url: `${location.protocol}//${location.hostname}`
          });
        } else {
          self.$store.commit("GET_LOGIN_TYPE", "toDown");
          self.$store.commit("SET_VISIBLE_LOGIN", true);
        }
      }
    },
    async writeMessage(type, id) {
      let self = this;
      self.$store.commit("SET_EXTENSION_TEXT", "message");
      if (this.$store.state.res.int_type === 2) {
        window.sessionStorage.setItem("title", this.$store.state.res.title);
      } else {
        window.sessionStorage.setItem("title", this.$store.state.content.text);
      }
      // 渲染页面前 先判断cookies token是否存在
      if (Cookie.get("token")) {
        self.gotoMessage(type, id);
      } else {
        // 前期 仅微信 后期再做微博，qq等授权， 所以在其他浏览器 需使用默认登录
        if ($async.isWeiXin()) {
          let url;
          if (type === "comment") {
            url = `${location.protocol}//${
              location.hostname
            }/feed/tomessage/${id}`;
          } else {
            url = `${location.protocol}//${location.hostname}/feed/tomessage/${
              this.$route.params.id
            }/${id}`;
          }
          // 通过微信授权 获取code
          await self.$store.dispatch("get_wx_auth", {
            url
          });
        } else {
          self.gotoMessage(type, id);
        }
      }
    },
    // h5下载补丁
    async downApp(e, str) {
      let self = this;
      await self.$com.down_statistics({
        store: self.$store,
        route: self.$route,
        str,
        defaultStr: self.$store.state.extension_text
      });
    },
    // 点赞操作
    async toSupport(e) {
      e.target.src =
        "";
    },
    // 前往写留言
    gotoMessage(type, id) {
      if (type === "comment") {
        this.$router.push({ path: `/feed/tomessage/${id}` });
      } else {
        this.$router.push({
          path: `/feed/tomessage/${this.$route.params.id}/${id}`
        });
      }
    }
  },
  beforeMount() {
    this.getMessageList();
  }
};
</script>
<style scoped lang="less">
@import "../assets/css/feedid.less";
@textcolor: #495060;
@focuscolor: #507caf;
@bottomcolor: #eaeaea;
@m20: 2.667vw;
@basefont: 16px;
@height: 11.47vw;
.feed-2 {
  display: block;
  .message-num {
    height: @height;
    line-height: @height;
    padding: 0 3.2vw;
    font-size: @basefont;
    box-sizing: border-box;
    margin-bottom: 0;
    // font-weight: bold;
    .writeMessage {
      color: @focuscolor;
      font-size: 16px;
    }
  }
  .feed-messagebord-list-cell {
    padding: @m20 0 0;
    .messager-info-div {
      img {
        width: 9.6vw;
        height: 9.6vw;
        max-width: 72px;
        max-height: 72px;
        border-radius: 100%;
        margin-right: @m20;
      }
      .messager-name {
        margin-bottom: 2px;
      }
    }
    .messager-content {
      margin-left: 12.267vw;
      line-height: 1.6;
      text-align: justify;
      font-size: @basefont - 1;
      box-sizing: border-box;
      border-bottom: 1px solid @bottomcolor;
      .messager-content-1 {
        margin-bottom: @m20;
      }
      .messager-comments {
        padding: @m20 / 2 @m20;
        background-color: #f4f4f4;
        margin: 0 0 @m20 * 2;
        .messager-comments-cell {
          box-sizing: border-box;
          padding: 0.67vw 0;
          .reply-number {
            color: @focuscolor;
          }
        }
      }
    }
  }
  .feed-messagebord-list-cell:last-child {
    .messager-content {
      border-bottom: 0;
    }
  }
  .look-more {
    height: @height;
    font-size: @basefont;
    color: @focuscolor;
    border-top: 1px solid @bottomcolor;
    .right-arrow {
      width: 2.4vw;
      height: 2.4vw;
      background: url("../assets/images/Shape2@2x.png") no-repeat;
      background-size: cover;
      margin-left: @m20;
    }
  }
  .messages {
    img {
      margin-right: @m20 / 2;
    }
  }
}
.nomessage {
  height: 13.34vw;
  box-sizing: border-box;
  padding: @m20 / 2 @m20;
  background: #fff;
  color: @focuscolor;
  font-size: @basefont;
  .prompt {
    color: @textcolor;
  }
  .write {
    height: 13.34vw;
    padding-left: @m20;
  }
}
@media screen and (min-width: 681px) {
  .feed-2 {
    display: none;
  }
}
</style>